<template>
  <div class="patient">
    <div class="patient-box">
      <p class="flex flex-center align-center patient-box-title">{{ userInfo.name }}</p>
      <div class="flex flex-center align-center patient-box-main">
        <div class="flex flex-center align-center patient-box-main-one">
          <div class="flex flex-center align-center patient-box-main-two">
            <div class="flex flex-center align-center patient-box-main-three">
              <div>
                <div class="patient-box-main-three-num">98</div>
                <!-- <div class="patient-box-main-three-num">{{homeData.scoreAll}}</div> -->
                <div class="patient-box-main-three-title">综合</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-between patient-box-bottom">
        <div class="patient-box-bottom-l">
          <div class="patient-box-bottom-l-num" @click="gotoProcess">89</div>
          <!-- <div class="patient-box-bottom-l-num">{{homeData.scoreSub1}}</div> -->
          <div class="patient-box-bottom-l-name">治疗进展</div>
        </div>
        <div class="patient-box-bottom-r">
          <div class="patient-box-bottom-l-num" @click="gotoProcess">95</div>
          <!-- <div class="patient-box-bottom-l-num">{{homeData.scoreSub2}}</div> -->
          <div class="patient-box-bottom-l-name">康复进展</div>
        </div>
      </div>
    </div>
    <div class="patient-share">
      <div class="flex flex-left align-center patient-share-box">
        <div class="flex flex-center align-center patient-share-box-l">
          <img class="patient-share-box-l-qr"
               src=""
               alt="">
        </div>
        <div class="patient-share-box-center">
          <div class="patient-share-box-center-title">扫码查看详情</div>
          <div class="patient-share-box-center-toast">查看诊疗进程</div>
        </div>
        <div class="patient-share-box-btn">
          <van-button type="primary" color="#42DDA2" style="width:100%;height:100%;" size="small" @click="shareFunc">
            分享
          </van-button>
        </div>
      </div>
    </div>
    <div class="patient-process">
      <div class="patient-process-main">
        <div class="flex flex-center align-center patient-process-main-one">
          <div class="flex flex-center align-center" v-for="(item,index) in processOne" :key="item.id">
            <div class="patient-process-main-one-list" @click="gotoPagesFunc(index,item.processId,item.processStatus)">
              <div class="flex flex-center patient-process-main-one-list-img">
                <img :src="item.processStatus == 0 ? processUrl[item.processId] : processUrl1[item.processId]" alt="">
              </div>
              <div class="patient-process-main-one-list-name">{{ item.processName }}</div>
            </div>
            <div class="patient-process-main-one-list" v-if="index < processOne.length - 1">
              <img class="patient-process-main-one-icon" :src="require('../assets/right.png')" alt="">
            </div>
          </div>
        </div>
        <div class="flex flex-center align-center patient-process-main-one patient-process-main-one1">
          <div class="flex flex-center align-center" v-for="(item,index) in processTwo" :key="item.id">
            <div class="patient-process-main-one-list" @click="gotoPagesFunc(index+4,item.processId,item.processStatus)">
              <div class="flex flex-center patient-process-main-one-list-img">
                <img :src="item.processStatus == 0 ? processUrl[item.processId] : processUrl1[item.processId]" alt="">
              </div>
              <div class="patient-process-main-one-list-name">{{ item.processName }}</div>
            </div>
            <div class="patient-process-main-one-list" v-if="index < processTwo.length - 1">
              <img class="patient-process-main-one-icon" :src="require('../assets/right.png')" alt="">
            </div>
          </div>
        </div>
        <div class="patient-process-main-toast">
          您已进入<span>{{ homeData.currentProcessTip }}</span>，请根据主治医师的方案规划好就诊时间！
        </div>
        <div class="patient-process-main-btn">
          <van-button type="primary" size="large" color="#42DDA2" style="height:100%;">查看详情
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {patientHomeData, queryProcess} from '@/api/index.js'
import useClipboard from 'vue-clipboard3'

export default {
  name: 'Patient',
  props: {
    msg: String
  },
  data() {
    return {
      userInfo: '',
      homeData: '',
      activeIndex: 0,
      items: [],
      processOne: '',
      processTwo: '',
      processUrl: {
        10: require('../assets/process_10.png'),
        20: require('../assets/process_20.png'),
        30: require('../assets/process_30.png'),
        40: require('../assets/process_40.png'),
        50: require('../assets/process_50.png'),
        60: require('../assets/process_60.png'),
        70: require('../assets/process_70.png'),
      },
      processUrl1: {
        10: require('../assets/process_s_10.png'),
        20: require('../assets/process_s_20.png'),
        30: require('../assets/process_s_30.png'),
        40: require('../assets/process_s_40.png'),
        50: require('../assets/process_s_50.png'),
        60: require('../assets/process_s_60.png'),
        70: require('../assets/process_s_70.png'),
      }
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    document.title = this.userInfo.name;
    this.getHomeDataFunc();
    this.queryProcessFunc();
  },
  mounted() {
  },
  methods: {
    // 点击跳转到功能页面
    gotoPagesFunc(index, processId, status) {
      console.log(index);
      if (status === 0) {
        this.$toast('当前还未进入此流程，请先完成之前流程');
        return
      }
      let pathUrl = this.userInfo.userType == 0 ? '/zlwork' : '/patient';
      let pathUrl1 = this.userInfo.userType == 0 ? '/fzDoctorWorkbench' : '/fzpatient';
      switch (index) {
        case 0:
          this.$router.push({path: '/hospitalInfo', query: {userid: this.userInfo.id, processid: processId}});
          break;
        case 1:
          this.$router.push({path: '/mindReview', query: {userid: this.userInfo.id, processid: processId}});
          break;
        case 2:
          this.$router.push({path: '/hlplan', query: {userid: this.userInfo.id, processid: processId}});
          break;
        case 3:
          this.$router.push({path: pathUrl, query: {userid: this.userInfo.id, processid: processId}});
          break;
        case 4:
          this.$router.push({path: pathUrl1, query: {userid: this.userInfo.id, processid: processId}});
          break;
        case 5:
          this.$router.push({path: '/hospitalManage', query: {userid: this.userInfo.id, processid: processId}});
          break;
        case 6:
          // this.$router.push({path: ''});
          break;
      }
    },
    // 获取患者首页数据
    getHomeDataFunc() {
      patientHomeData().then(res => {
        console.log('home', res.data)
        this.homeData = res.data;
      })
    },
    // 查询用户流程数据
    queryProcessFunc() {
      queryProcess('userId=' + this.userInfo.id).then(res => {
        console.log('process', res.data)
        let aData = JSON.parse(JSON.stringify(res.data));
        this.processOne = aData.splice(0, 4);
        this.processTwo = aData
      })
    },
    // 跳转到流程
    gotoProcess() {
      this.$router.push({path: '/process', query: {userid: this.userInfo.id}})
    },
    // 分享
    shareFunc() {
      const {toClipboard} = useClipboard()
      toClipboard(window.location.origin + '/#/sharePatient?p=' + this.userInfo.phoneMd5 + '&share=0')
      this.$toast('链接已复制到剪切板，可以去微信中粘贴');
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.patient {
  width: 100%;
  height: auto;
  /* margin-bottom: 20px !important; */
}

.patient-box {
  position: relative;
  width: auto;
  height: 420px;
  background: linear-gradient(180deg, #65e6ab, #42dda2);
}

.patient-box-title {
  width: 100%;
  height: 50px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 0;
}

.patient-box-main {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
}

.patient-box-main-one {
  width: 225px;
  height: 225px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.patient-box-main-two {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.5);
}

.patient-box-main-three {
  width: 175px;
  height: 175px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.7);
}

.patient-box-main-three-num {
  width: 100%;
  height: auto;
  color: #fff;
  font-size: 80px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}

.patient-box-main-three-title {
  width: 100%;
  height: auto;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

.patient-box-bottom {
  position: absolute;
  bottom: 20px;
  width: 100%;
  height: 120px;
}

.patient-box-bottom-l {
  width: auto;
  height: auto;
  margin-left: 57px;
}

.patient-box-bottom-l-num {
  width: auto;
  height: auto;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

.patient-box-bottom-l-name {
  width: auto;
  height: auto;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

.patient-box-bottom-r {
  width: auto;
  height: auto;
  margin-right: 57px;
}

.patient-share {
  position: relative;
  top: -50px;
  width: 345px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
}

.patient-share-box {
  width: auto;
  height: auto;
  padding: 20px;
}

.patient-share-box-l {
  width: 76px;
  height: 76px;
  background-color: #F3F4F7;
}

.patient-share-box-l-qr {
  width: 69px;
  height: 69px;
  overflow: hidden;
  vertical-align: top;
}

.patient-share-box-center {
  width: auto;
  height: auto;
  flex: 1;
  overflow: hidden;
  margin: 0 10px;
}

.patient-share-box-center-title {
  width: 100%;
  height: auto;
  color: #333333;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-share-box-center-toast {
  width: 100%;
  height: auto;
  color: #999999;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-share-box-btn {
  width: 62px;
  height: 24px;
  border-radius: 4px;
  background-color: #42DDA2;
}

.patient-process {
  position: relative;
  top: -30px;
  width: 345px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
}

.patient-process-main {
  width: auto;
  height: auto;
  padding: 16px;
}

.patient-process-main-one {
  width: auto;
  height: auto;
}

.patient-process-main-one1 {
  margin-top: 24px;
}

.patient-process-main-one-list {
  width: auto;
  height: auto;
}

.patient-process-main-one-list-img {
  width: 100%;
  height: 36px;
  overflow: hidden;
}

.patient-process-main-one-list-img img {
  width: 36px;
  height: 36px;
  vertical-align: top;
}

.patient-process-main-one-list-name {
  width: auto;
  height: auto;
  color: #333333;
  font-size: 10px;
  font-weight: 400;
  margin-top: 4px;
}

.patient-process-main-one-icon {
  width: 12px;
  height: 12px;
  overflow: hidden;
  vertical-align: top;
}

.patient-process-main-toast {
  width: auto;
  height: auto;
  padding: 16px 30px;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

.patient-process-main-toast span {
  color: #42DDA2;
}

.patient-process-main-btn {
  width: 100%;
  height: 38px;
  border-radius: 4px;
  overflow: hidden;
}
</style>
